<template>
  <div id="home">

    <nav-bar class="home-nav">
      <div slot="center">shopping street</div>
    </nav-bar>
    <tab-control :titles="titles" @tabClick="tabClick" ref="tabControl1" class="tab-control" v-show="isTabFixed"/>

    <scroll class="home-wrapper" ref="scroll" :probe-type="3" @scroll="contentScroll" :pull-up-load="true"
            @pullingUp="loadMore">
      <home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"></home-swiper>
      <recommend :recommends="recommends"></recommend>
      <feature></feature>
      <tab-control :titles="titles" @tabClick="tabClick" ref="tabControl2"></tab-control>
      <goods-list :goods="goods[currentType].list"></goods-list>
    </scroll>

    <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>

  </div>
</template>

<script>
    import NavBar from "components/navbar/NavBar";
    import HomeSwiper from "./child/HomeSwiper";
    import Recommend from "./child/Recommend";
    import Feature from "./child/Feature";
    import TabControl from "components/tabcontrol/TabControl";
    import GoodsList from "components/goods/GoodsList";
    import Scroll from "components/scroll/Scroll";
    import BackTop from "components/backtop/BackTop";

    import {getHomeMultidata, getHomeGoods} from "network/home";
    import {itemListenerMixin} from "common/mixin";


    export default {
        name: "Home",
        components: {
            NavBar,
            HomeSwiper,
            Recommend,
            Feature,
            TabControl,
            GoodsList,
            Scroll,
            BackTop
        },
        mixins: [itemListenerMixin],
        data() {
            return {
                banners: [],
                recommends: [],
                titles: ["流行", "新款", "精选"],
                goods: {
                    // page记录页数，当tabControl切换时需要记录商品数据当前是第几页
                    'pop': {page: 0, list: []},
                    'new': {page: 0, list: []},
                    'sell': {page: 0, list: []},
                },
                currentType: 'pop',
                isShowBackTop: false,
                tabOffsetTop: 0,
                isTabFixed: false,
                saveY: 0,
            }
        },
        mounted() {
            // 监听GoodsListItem中图片加载完成，以便better-scroll重新计算scrollHeight的高度
            // 对于refresh刷新非常频繁的问题要进行防抖处理
            // const refresh = debounce(this.$refs.scroll.refresh);
            // this.itemImgListener = () => {refresh()};
            // this.$bus.$on('itemImageLoad', this.itemImgListener);
            // 获取tabControl组件的offsetTop
            // 所有的组件都有一个属性$el，用于获取组件中的元素
            // this.tabOffsetTop = this.$refs.tabControl.$el.offsetTop
        },
        created() {
            // 在created函数中建议只写主要逻辑，具体的业务逻辑放到methods中
            this.getHomeMultidata();
            this.getHomeGoods('pop');
            this.getHomeGoods('new');
            this.getHomeGoods('sell');
        },
        methods: {
            getHomeMultidata() {
                getHomeMultidata().then(res => {
                    // console.log(res.data)
                    this.banners = res.data.banner.list;
                    this.recommends = res.data.recommend.list;
                });
            },
            getHomeGoods(type) {
                const page = this.goods[type].page + 1;
                getHomeGoods(type, page).then(res => {
                    // console.log(res.data.list);
                    this.goods[type].list.push(...res.data.list);
                    this.goods[type].page += 1;
                    // 完成一次上拉加载更多后需要调用finishPullUp()方法才能继续上拉加载更多
                    this.$refs.scroll.finishPullUp()
                })
            },
            tabClick(index) {
                switch (index) {
                    case 0:
                        this.currentType = 'pop';
                        break;
                    case 1:
                        this.currentType = 'new';
                        break;
                    case 2:
                        this.currentType = 'sell';
                        break;
                }
                this.$refs.tabControl1.currentIndex = index;
                this.$refs.tabControl2.currentIndex = index;
            },
            backClick() {
                // 当backTop组件点击时需要操作better-scroll组件中的scrollTo()方法让其回到顶部
                this.$refs.scroll.scrollTo(0, 0, 500)
            },
            contentScroll(position) {
                this.isShowBackTop = -position.y > 1000;
                // 判断tabControl滚动多少距离吸顶
                this.isTabFixed = (-position.y) > this.tabOffsetTop
            },
            // 上拉加载更多
            loadMore() {
                this.getHomeGoods(this.currentType);
            },
            swiperImageLoad() {
                this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
            }
        },
        // Home页面离开时保存离开时的位置信息
        activated() {
            // 进入该页面时（该页面激活）
            this.$refs.scroll.scrollTo(0, this.saveY, 0);
            this.$refs.scroll.refresh()
        },
        deactivated() {
            // 离开该页面时
            this.saveY = this.$refs.scroll.getScrollY()
            // 取消全局事件的监听。参数为 取消的事件及事件对应的函数
            this.$bus.$off('itemImgLoad', this.itemImgListener)
        }
    }
</script>

<style scoped>
  #home {
    /*padding-top: 44px;*/
    height: 100vh;
    position: relative;
  }

  .home-nav {
    background-color: var(--color-tint);
    color: #fff;
    /*position: fixed;*/
    /*right: 0;*/
    /*left: 0;*/
    /*top: 0;*/
    /*z-index: 9;*/
  }

  /*简单的吸顶效果*/
  /*.tab-control-home {*/
  /*  position: sticky;*/
  /*  top: 44px;*/
  /*  z-index: 9;*/
  /*}*/

  /* 设置wrapper的样式有下面两种方法 */
  .home-wrapper {
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
    /*height: 100vh;*/
  }

  .tab-control {
    position: relative;
    z-index: 9;
  }
</style>
